<template>
  <div class="container">
    <div class="showCont" v-if="showCont && !showTimeOut">
      <div class="formCont">
        <div class="orderStatus">
          <img v-if="detailInfo.is_bidder == 1" src="/img/statusBid.png" />
          <img v-if="detailInfo.is_bidder == 2" src="/img/statusBind.png" />
          <img v-if="detailInfo.is_bidder == 3" src="/img/statusOver.png" />
          <img v-if="detailInfo.is_bidder == 4" src="/img/statusNoBind.png" />
        </div>
        <div class="formTitle">
          <div class="shuIcon"></div>
          <div>订单信息</div>
        </div>
        <div class="formInput">
          <div class="inputName">订单编号</div>
          <div class="authVal">
            {{ detailInfo.user_project_deliver_number }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">接单时间</div>
          <div class="authVal">{{ detailInfo.create_time }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">中标时间</div>
          <div class="authVal">{{ detailInfo.bidder_time }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">完成时间</div>
          <div class="authVal">{{ detailInfo.complete_time }}</div>
        </div>
        <div class="formTitle hasTop">
          <div class="shuIcon"></div>
          <div>项目信息</div>
        </div>
        <div class="productHead">
          <div class="productName">
            {{ detailInfo.project_demand_number }} ·
            {{ detailInfo.project_name }}
          </div>
          <div class="productMoney">
            ¥{{ $converData.setMoney(detailInfo.project_budget) }}
          </div>
        </div>
        <div class="formInput">
          <div class="inputName">经验要求</div>
          <div class="authVal">{{ detailInfo.jdjy }}年以上</div>
        </div>
        <div class="formInput">
          <div class="inputName">周期要求</div>
          <div class="authVal">{{ detailInfo.project_cycle }}个月</div>
        </div>
        <div class="formInput">
          <div class="inputName">办公要求</div>
          <div class="authVal">{{ detailInfo.bgyq }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">接单对象</div>
          <div class="authVal">{{ detailInfo.jdqt }}</div>
        </div>
        <div class="formInput">
          <div class="inputName">需求说明</div>
          <div class="authVal">
            <van-text-ellipsis
              :content="detailInfo.project_describe"
              rows="3"
              expand-text="展开"
              collapse-text="收起"
            />
          </div>
        </div>
        <div class="formTitle hasTop">
          <div class="shuIcon"></div>
          <div>雇主电话</div>
        </div>
        <div class="telCont">
          <div class="telNum">
            <span class="iconfont icon-24gl-phoneLoudspeaker"></span>
            {{ detailInfo.enterprise_phone }}
          </div>
          <div
            @click="telFn"
            :class="
              detailInfo.is_bidder == 2 || detailInfo.is_bidder == 3
                ? 'telBtn'
                : 'telBtn disBtn'
            "
          >
            联系雇主
          </div>
        </div>
      </div>
    </div>
    <div class="ctrlBtn">
      <div class="homeBtn iconfont icon-fanhui1" @click="backFn"></div>
      <div class="subBtn" @click="detailFn">查看需求详情</div>
    </div>
  </div>
</template>
<script>
import { orderDetails } from "@/http/api";
import { showToast, showDialog } from "vant";
export default {
  components: {},
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      orderCont:
        ".AI矢量文件 。客户提供设计素材和设计需求，然后做出 设计稿给客户确认。以下是参考图片。",
      detailInfo: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    detailFn() {
      this.$router.push({
        path: "/detail",
        query: { id: this.detailInfo.project_demand_id },
      });
    },
    telFn() {
      if (this.detailInfo.is_bidder == 2 || this.detailInfo.is_bidder == 3) {
        window.location.href = "tel:" + this.detailInfo.enterprise_phone;
      } else {
        showDialog({
          title: "操作提示",
          message: "中标后可查看雇主完整电话",
        }).then(() => {});
      }
    },
    getData() {
      let data = {
        user_project_deliver_id: this.$route.query.id,
      };
      orderDetails(data)
        .then((res) => {
          if (res.data.code == 1) {
            this.detailInfo = res.data.data;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<style scoped lang="less">
.container {
  min-height: 100vh;
  background-color: #e7eeff;
  .showCont {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    box-sizing: border-box;
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto 0.75rem;
    position: relative;
    overflow: hidden;
    padding: 1rem 4%;
    border-radius: 0.25rem;

    box-sizing: border-box;
    .orderStatus {
      position: absolute;
      right: 0rem;
      top: 0rem;
      img {
        width: 4rem;
        transform: rotate(50deg);
      }
    }
    .formTitle {
      font-size: 0.8rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      color: #86a9fb;
      .shuIcon {
        width: 0.2rem;
        height: 1rem;
        background-color: #86a9fb;
        border-radius: 0.1rem;
        margin-right: 0.75rem;
      }
    }
    .hasTop {
      margin-top: 1.5rem;
    }
    .telCont {
      display: flex;
      justify-content: space-between;
      .telNum {
        font-size: 1.1rem;
        //   text-align: center;
        .iconfont {
          font-size: 1.1rem;
        }
      }
      .telBtn {
        font-size: 0.6rem;
        padding: 0.35rem 1rem;
        border-radius: 2rem;
        background-color: #86a9fb;
        color: #fff;
      }
      .disBtn {
        opacity: 0.5;
      }
    }

    .productHead {
      display: flex;
      align-items: center;
      margin-bottom: 0.75rem;
      justify-content: space-between;
      .productName {
        font-size: 0.8rem;
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .productMoney {
        color: #86a9fb;
        font-size: 0.8rem;
      }
    }
    .formUnder {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px dashed #ccc;
      padding-top: 0.75rem;
      margin-top: 0.75rem;
      .userInfo {
        display: flex;
        align-items: center;
        .userImg {
          width: 2.5rem;
          height: 2.5rem;
          font-size: 0;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.75rem;
          img {
            width: 100%;
          }
        }
        .userName {
          .userNametext {
            font-size: 0.7rem;
            font-weight: bold;
          }
          .userNameDes {
            display: flex;
            margin-top: 0.25rem;
            align-items: center;
            font-size: 0.6rem;
            .desItem {
              display: flex;
              align-items: center;
              .iconfont {
                font-size: 0.8rem;
                margin-right: 0.25rem;
              }
            }
            .hasRight {
              margin-right: 0.75rem;
            }
          }
        }
      }
      .subBtn {
        padding: 0.25rem 1rem;
        border: 1px solid #86a9fb;
        color: #86a9fb;
        font-size: 0.6rem;
        border-radius: 0.25rem;
      }
    }
    .hasTop {
      margin-top: 1.25rem;
    }
    .formInput {
      display: flex;
      box-sizing: border-box;
      // align-items: center;
      width: 100%;
      margin-bottom: 0.25rem;
      color: #777;
      line-height: 1rem;
      .inputName {
        width: 3.5rem;
      }
      .authVal {
        flex: 1;
        width: 2rem;
      }
    }
    .formImg {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      .formImgItem {
        width: 31%;
        margin-left: 3.5%;
        border-radius: 0.25rem;
        overflow: hidden;
        max-height: 4.8rem;
        margin-bottom: 0.4rem;
        img {
          width: 100%;
          border-radius: 0.25rem;
        }
      }
      .noLeft {
        margin-left: 0;
      }
    }
  }
  .tipCont {
    background-color: #fff;
    width: 92%;
    margin: 0 auto;
    padding: 0.75rem 4%;
    border-radius: 0.25rem;
    box-sizing: border-box;
    .tipHead {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
      color: #86a9fb;
    }
    .tipItem {
      margin-bottom: 0.5rem;
      color: #999;
      font-size: 0.6rem;
      .redText {
        color: #86a9fb;
      }
    }
  }
  .ctrlBtn {
    width: 100%;
    position: fixed;
    left: 0%;
    bottom: 0rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 4%;
    box-sizing: border-box;
    background: #fff;
    .homeBtn {
      width: 2.2rem;
      margin-right: 0.75rem;
      height: 2.2rem;
      line-height: 2.2rem;
      border-radius: 0.25rem;
      background-color: #86a9fb;
      color: white;
      text-align: center;
      font-size: 1rem;
    }
    .subBtn {
      flex: 1;
      line-height: 2.2rem;
      background-color: #86a9fb;
      color: #fff;
      border-radius: 0.25rem;
      text-align: center;
    }
    .saveIcon {
      margin-right: 0.75rem;
      font-size: 1.2rem;
      color: #999;
      // background-color: #86a9fb;
      border: 1px solid #86a9fb;
      line-height: 2.2rem;
      padding: 0 0.6rem;
      border-radius: 0.25rem;
      color: #86a9fb;
      background-color: #fff;
    }
    .isSave {
      background-color: #86a9fb;
      color: #fff;
    }
  }
}
</style>
<style>
.van-text-ellipsis__action {
  color: #86a9fb;
}
</style>
